<template>
  <div class="container">
    <!--主体课程-->
    <div class="index-container">
      <course-item v-for="item in list" :key="item.id" :course="item" />
    </div>
    <!--分页插件-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      class="index-pagination"
      @pagination="getList"
    />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import CourseItem from './component/CourseItem'
import defaultSetting from '@/settings'
import { getCourseListByType } from '@/api/course'

export default {
  name: 'Index',
  components: { Pagination, CourseItem },
  data() {
    return {
      list: [],
      // 总数
      total: 0,
      // 查询对象
      listQuery: {
        current: 1,
        size: 20,
        key: ''
      },
      defaultSetting
    }
  },
  computed: {
    courseClassify() {
      return this.$store.getters.classify
    }
  },
  watch: {
    courseClassify(newVal) {
      this.handleSelectType(newVal)
    }
  },
  created() {
    this.isMobile()
    if (this.$store.getters.classify !== this.$store.getters.typeList[0]) {
      this.listQuery.key = this.$store.getters.classify
    }
    this.getList()
  },
  methods: {
    // 获取课程列表
    getList() {
      getCourseListByType(this.listQuery).then(res => {
        this.total = res.data.total
        const data = res.data.records
        data.forEach(item => {
          if (item.rotationList.length === 0) {
            item.url = ''
          } else {
            item.url = defaultSetting.fileUrl + item.rotationList[0].url + '/' + item.rotationList[0].code
          }
        })
        this.list = data
      })
    },
    // 监听用户选择课程分类
    handleSelectType(key) {
      this.listQuery.key = key
      if (key === '精选') {
        this.listQuery.key = ''
      }
      this.getList()
    },
    // 判断设备类型
    isMobile() {
      const flag = /Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(navigator.userAgent)
      if (flag) {
        // 移动端设备
        window.location.href = 'https://wap.children.mumuwei.xyz'
      } else {
        // PC端
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}
  .index-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }
/* 使用伪元素辅助左对齐 */
  .index-pagination {
    background-color: #F4F4F4;
    text-align: center;
    margin: 0;
  }
</style>
